<template>
    <el-input v-model="name" @input="changeName" placeholder="请输入名称" />
    <el-table :data="data.tableData" style="width: 100%">

        <el-table-column type="index" width="50" />
        <el-table-column type="selection" width="55" />
        <!-- 常规列 -->
        <el-table-column v-for="col in columns" :label="col.label" :prop="col.prop" :key="col.prop" />

        <!-- 申请状态 -->
        <el-table-column label="申请状态" width="180">
            <template #default="scope">
                <el-tag type="success">{{ scope.row.name }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="small" type="success" @click="handleDelete(scope.row)">提交审核</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination :currentPage="pager.pageNo" :page-size="pager.pageSize" :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { queryLoanList } from '@/api/loan'
import { reactive, ref, watchEffect } from 'vue';
const data = reactive({
    tableData: []
});
const pager = reactive({
    name: '',
    pageNo: 1,
    pageSize: 10
});
const total = ref(0);
const columns = [
    {
        label: "姓名",
        prop: "name",
    },
    {
        label: "出生日期",
        prop: "birthday",
    },
    {
        label: "性别",
        prop: "sex",
    },
    {
        label: "教育程度",
        prop: "education",
    },
    {
        label: "居住地址",
        prop: "address1"
    },
    {
        label: "手机号",
        prop: "mobile_phone",
    },
    {
        label: "申请状态",
        prop: "status",
    }]

// 方法
const debounce = function (fn: any, delay: number) {
    let timer: any = null;
    return function () {
        clearTimeout(timer) // 每次调用debounce函数都会将前一次的timer清空，确保只执行一次
        timer = setTimeout(() => {
            fn(...arguments)
        }, delay)
    }
}
const name = ref('');
const changeName = debounce((val: any) => {
    pager.name = val; // 触发watchEffect
}, 1000)

const handleEdit = (row: any) => {

}
const handleDelete = (row: any) => {

}
function handleSizeChange(size: any) {
    pager.pageSize = size;  // 改变页显示数
    pager.pageNo = 1;
}
function handleCurrentChange(page: any) {
    pager.pageNo = page;
}

const init = async () => {
    console.log('watchEffect执行了')
    const res = await queryLoanList(pager);
    data.tableData = res.data.data?.data?.data;
    total.value = res.data.data.rows;
}
// 最对多对象 多属性的改变, 发起请求, watch不合适 computed管显示

// 一开始会触发一次, 接着内部使用的响应式数据改变后触发 副作用
watchEffect(init)

// init();


</script>